<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="resources/css/jquery-ui-1.8.21.custom.css">
<script src="resources/js/jquery-1.7.2.min.js"></script>
<script src="resources/js/jquery-ui-1.8.21.custom.min.js"></script>
<style type="text/css">
	#resize{
		width: 300px;
		height: 220px;
	}
	#resize2{
		width: 200px;
		height: 150px;
	}
	#resize3{
		width: 100px;
		height: 70px;
	}
</style>
</head>
<body>
<img id="resize" src="resources/img/cbnu1.jpg"><br>
<img id="resize2" src="resources/img/cbnu2.jpg"><br>
<img id="resize3" src="resources/img/cbnu3.jpg">

<script type="text/javascript">
			$(function(){

				var option = {
					aspectRatio: true ,		
					animate: true ,
					ghost: true, 
					animateDuration: "fast",
					alsoResize: "#resize2, #resize3"
				};
				$("#resize").resizable(option);
			});	
</script>
</body>
</html>